<template>
  <div class="app-container">
    <div class="p-2 pl-4 bg-white mb-4">
      <el-checkbox v-model="checked1" label="" size="large" />
      <span class="pr-10">1#库</span>

      <el-checkbox v-model="checked2" label="" size="large" />
      2#库
    </div>
    <div class="grid grid-cols-5 gap-4">
      <div class="bg-white p-4 rounded-md" v-for="(item, index) in 4" :key="index">
        <el-checkbox v-model="checked1" label="" size="large" />
        选择
        <div class="flex justify-center">
          <img src="/dabao.png" class="w-3/6" alt="">
        </div>
        <div class="pt-2">
          <div>名称：前大梁</div>
          <div>工号：100200176</div>
          <div>图号：GYDE-2-3</div>
          <div>机号：3#</div>
          <div>件号：2/2</div>
          <div style="color: red;">库存：50件</div>
          <div class="flex pt-2">
            <div class="flex-1"></div>
            <el-input-number v-model="num" size="small" />
          </div>
          <div class="pt-2 text-right">
            <el-button text bg type="success">到货提醒</el-button >
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="p-2 pl-4 bg-white my-4">
      <el-checkbox v-model="checked2" label="" size="large" />
      2#库
    </div> -->
    <!-- <div class="grid grid-cols-5 gap-4">
      <div class="bg-white p-4 rounded-md" v-for="(item, index) in 5" :key="index">
        <el-checkbox v-model="checked2" label="" size="large" />
        选择
        <div class="flex justify-center">
          <img src="/dabao.png" class="w-3/6" alt="">
        </div>
        <div class="pt-2">
          <div>名称：前大梁</div>
          <div>工号：100200176</div>
          <div>图号：GYDE-2-3</div>
          <div>机号：3#</div>
          <div>件号：2/2</div>
          <div style="color: red;">库存：50件</div>
          <div class="flex pt-2">
            <div class="flex-1"></div>
            <el-input-number v-model="num" size="small" />
          </div>
        </div>
      </div>
    </div>
    -->
    <div class="p-4 bg-white my-4 text-right">
      <!-- <div style="width: 900px;"></div> -->
      <el-button type="danger">删除物料</el-button>
      <el-button type="primary" @click="dan">下单</el-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ElMessage } from "element-plus"
import { ref } from 'vue'

const checked1 = ref(true)
const checked2 = ref(true)
const num = ref(20)

function dan() {
  ElMessage.info('选择收货地址、审批人 输入框')
  ElMessage.info('选择收货地址、审批人 输入框')
}
</script>
<style lang="scss" scoped></style>
